<template>
  <div style="line-height: 36px">
    归并:
    <el-button v-show="isShow" type="primary" :disabled="!loaded" @click="onStart">开始</el-button>
  </div>
  <svg id="MergeSort"></svg>
</template>
<script setup lang="ts" name="UseMerge">
import { inject, onMounted, ref, watch, type Ref } from 'vue';
import Snap from 'snapsvg-cjs';

const loaded = ref(false);
const isShow = ref(true);
const origins = inject<Ref<number[]>>('origins');
let thenStart = new Function();
let thenInit = new Function();
let thenStop = new Function();
let Svg: SVGAElement;
const onStart = function () {
  thenStart();
  isShow.value = false;
};
onMounted(function () {
  Svg = Snap('#MergeSort');
  import('./merge.js').then(module => {
    thenInit = module.init;
    thenStart = module.start;
    thenStop = module.stop;
    update();
  });

  loaded.value = true;
});
const update = function () {
  const datas: number[] = JSON.parse(JSON.stringify(origins?.value));
  thenInit(Svg, datas);
  isShow.value = true;
};
watch(
  () => origins?.value,
  () => {
    thenStop();
    update();
  },
);
</script>

<style scoped></style>
